<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DeepPro</title>
    <!-- bootstrap and awesome -->
    <link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="http://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- 滚动条样式 -->
    <link rel="stylesheet" href="/css/sidebar_theme/jquery.mCustomScrollbar.min.css" />
    <!-- 触发默认样式custom，还有orange -->
    <link rel="stylesheet" href="/css/sidebar_theme/blue.css">
    <!-- 多标签导航 -->
    <link rel="stylesheet" href="/css/b.tabs.css" type="text/css">
    <!-- jq -->
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="/js/jquery-ui.min.js"></script>
    <script type="text/javascript" src="/js/b.tabs.js"></script>
    <!-- 滚动条 -->
    <script src="/js/sidebar_js/jquery.mCustomScrollbar.concat.min.js"></script>
    <!-- 触发响应 -->
    <script src="/js/sidebar_js/custom.js"></script>
    <style type="text/css">
        body{
            background-image: url('/image/common/bg01.jpg');
        }
        img.icon{
            margin-left: 46%;
        }
        #sidebar{
            opacity:0.5;
        }
        #sidebar:hover{
            opacity:0.9;
        }
    </style>
</head>
<body>
<div class="page-wrapper">
    <nav id="sidebar" class="sidebar-wrapper">
        <div class="sidebar-content">
            <!-- 触发按钮 -->
            <a href="#" id="toggle-sidebar"><i class="fa fa-bars"></i></a>
            <div class="sidebar-brand">
                <a href="#">管理员</a>
            </div>
            <div class="sidebar-header">
                <div class="user-pic">
                    <img class="img-responsive img-rounded" src="assets/img/user.jpg" alt="">
                </div>
                <div class="user-info">
                    <span class="user-name">约翰 <strong>讯</strong></span>
                    <span class="user-role">管理员</span>
                    <div class="user-status">
                        <a href="#"><span class="label label-success">在线</span></a>
                    </div>
                </div>
            </div><!-- sidebar-header  -->
            <div class="sidebar-search">
                <div>
                    <div class="input-group">
                        <input type="text" class="form-control search-menu" placeholder="搜索">
                        <span class="input-group-addon"><i class="fa fa-search"></i></span>
                    </div>
                </div>
            </div><!-- sidebar-search  -->
            <div class="sidebar-menu">
                <ul>
                    <li class="header-menu"><span>一级标题</span></li>
                    <li class="sidebar-dropdown">
                        <a  href="#" ><i class="fa fa-tv"></i><span>管理员</span><span class="label label-danger">New</span></a>
                        <div class="sidebar-submenu">
                            <!-- 加入动态添加tag -->
                            <ul id="menuSideBar">
                                <li mid="tab1" funurl="${webroot}demo/manage/tabsPage1"><a href="javascript:void(0);">权限管理 </a> </li>
                                <li mid="tab2" funurl="${webroot}demo/manage/tabsPage2"><a href="javascript:void(0);">角色管理</a></li>
                                <li mid="tab3" funurl="${webroot}demo/manage/tabsPage3"><a href="javascript:void(0);">人员管理</a></li>
                                <li mid="tab4" funurl="${webroot}demo/manage/tabsPage4"><a href="javascript:void(0);">数据结构管理</a></li>
                            </ul>
                        </div>
                    </li>
                    <li class="sidebar-dropdown">
                        <a href="#"><i class="fa fa-photo"></i><span>文件管理</span><span class="badge">3</span></a>
                        <div class="sidebar-submenu">
                            <ul>
                                <li><a href="#">上传<span class="badge">2</span></a></li>
                                <li><a href="#">审核文件</a></li>
                                <li><a href="#">下载文件</a></li>
                                <li><a href="#">文件存储管理</a></li>
                            </ul>
                        </div>
                    </li>
                    <li class="sidebar-dropdown">
                        <a href="#"><i class="fa fa-bar-chart-o"></i><span>数据统计</span></a>
                        <div class="sidebar-submenu">
                            <ul>
                                <li><a href="#">在线用户</a></li>
                                <li><a href="#">系统日志</a></li>
                                <li><a href="#">报表</a></li>
                                <li><a href="#">年度数据</a></li>
                            </ul>
                        </div>
                    </li>
                    <li class="sidebar-dropdown">
                        <a href="#"><i class="fa fa-diamond"></i><span>快速生成</span></a>
                        <div class="sidebar-submenu">
                            <ul>
                                <li><a href="#">模板</a></li>
                                <li><a href="#">编辑</a></li>
                                <li><a href="#">代码位置</a></li>
                                <li><a href="#">统计</a></li>
                            </ul>
                        </div>
                    </li>
                    <li class="header-menu"><span>待处理</span></li>
                    <li><a href="#"><i class="fa fa-tv"></i><span>文件1</span></a></li>
                    <li><a href="#"><i class="fa fa-photo"></i><span>文件2</span></a></li>
                    <li><a href="#"><i class="fa fa-bar-chart-o"></i><span>事物3</span></a></li>
                    <li><a href="#"><i class="fa fa-diamond"></i><span>事物4</span></a></li>
                </ul>
            </div><!-- sidebar-menu  -->
        </div><!-- sidebar-content  -->

        <div class="sidebar-footer">
            <a href="#"><i class="fa fa-bell"></i><span class="label label-warning notification">3</span></a>
            <a href="#"><i class="fa fa-envelope"></i><span class="label label-success notification">7</span></a>
            <a href="#"><i class="fa fa-gear"></i></a>
            <a href="#"><i class="fa fa-power-off"></i></a>
        </div>
    </nav><!-- sidebar-wrapper  -->


    <img class="icon" src="/image/common/deep_pro.ico" width="50px" height="50px">
    <h1></h1>
    <div class="container">
        <!-- 标签页区域 -->
        <div id="mainFrameTabs">
            <!-- Nav tabs -->
            <ul class="nav nav-tabs" role="tablist">
                <!-- 设置默认的首页标签页，设置noclose样式，则不会被关闭 -->
                <li role="presentation" class="active noclose"><a href="#bTabs_navTabsMainPage" data-toggle="tab">Deep Pro首页</a></li>
                <!-- <button class="btn btn-success" id="close_all">关闭全部</button> -->
            </ul>
            <!-- Tab panes -->
            <div class="tab-content">
                <!-- 默认标签页（首页）的内容区域 -->
                <div class="tab-pane active" id="bTabs_navTabsMainPage">
                    <div class="page-header">
                        <h2 style="font-size: 31.5px;text-align: center;font-weight: normal;color: #fff;">Deep Pro
                            <h4 style="color: #fff;">[专注本质]<br><br>
                                基于bootstrap的侧边栏和bTabs的动态标签栏<br><br>
                                扔掉传统的iframe的各种弊端，使用可读性高，兼容性强的json作为传播数据载体<br><br>
                                使用thymeleaf动态渲染HTML，浏览器更友好<br><br>
                                布局追求极简，使得办公效率提升，更专注<br><br>

                            </h4>
                        </h2>
                    </div>
                    <div style="text-align: center;font-size: 20px;line-height: 20px;color: #fff;">
                        Welcome to use Deep Pro!
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- page-content" -->
</div><!-- page-wrapper -->
<script type="text/javascript">
    //导航区域项目点击增加标签页处理
    //仅演示功能
    $('a',$('#menuSideBar')).on('click', function(e) {
        // e.stopPropagation();
        var li = $(this).closest('li');
        var menuId = $(li).attr('mid');
        var url = $(li).attr('funurl');
        var title = $(this).text();
        //校验登录是否超时，通常使用ajax访问服务端测试登录是否超时
        //若页面端已有超时自动跳转的处理，则不需要设置该回调
        var checkLogin = function(){

        };
        $('#mainFrameTabs').bTabsAdd(menuId,title,url,checkLogin);
    });

    //插件的初始化
    $('#mainFrameTabs').bTabs({
        //登录界面URL，用于登录超时后的跳转
        'loginUrl' : '#',
        //用于初始化主框架的宽度高度等，另外会在窗口尺寸发生改变的时候，也自动进行调整
        'resize' : function(){
            //这里只是个样例，具体的情况需要计算
            $('#mainFrameTabs').height(500);
        }
    });
</script>
</body>
</html>